<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="详情"
      color="#000"
      left-icon="left"
      backgroundColor="transparent"
      @clickLeft="onBack"
    >
    </uni-nav-bar>

    <view class="box">
      <view class="mainBox">
        <view class="id">{{ data?.buildingCheckTime }}</view>
        <view class="status">{{
          $util.selectDictLabel(buildingCheckStatus, data?.buildingCheckStatus)
        }}</view>
      </view>
      <view class="infoBox">
        <view class="item">
          <text class="name">检查人</text>
          <text class="val">{{ data?.buildingCheckNickName }}</text>
        </view>
        <view class="item">
          <text class="name">同行检查人</text>
          <text class="val">{{ data?.buildingCheckPeerNickNames }}</text>
        </view>
        <view class="item">
          <text class="name">检查问题</text>
          <text class="val">{{ data?.buildingCheckProblem }}</text>
        </view>
        <view class="item">
          <text class="name">整改期限</text>
          <text class="val">{{ data?.rectificationDeadline }}</text>
        </view>
        <view class="item">
          <text class="name">复查人员</text>
          <text class="val">{{ data.recheckUser }}</text>
        </view>
        <view class="item">
          <text class="name">复查时间</text>
          <text class="val">{{ data.recheckTime }}</text>
        </view>
        <view class="item">
          <text class="name">复查结果</text>
          <text class="val">{{
            $util.selectDictLabel(recheckResult, data?.recheckResult)
          }}</text>
        </view>
        <view class="item cdItemImg">
          <view class="l">检查附件</view>
          <view class="r" v-if="data?.checkOssIdArrStr">
            <view
              class="img"
              v-for="(item, i) in data.checkOssIdArrStr.split(',')"
              :key="i"
            >
              <img :src="item.url" />
            </view>
          </view>
        </view>
        <view class="item cdItemImg">
          <view class="l">复查附件</view>
          <view class="r" v-if="data?.recheckOssIdArrStr">
            <view
              class="img"
              v-for="(item, i) in data.recheckOssIdArrStr.split(',')"
              :key="i"
            >
              <img :src="item.url" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer" v-if="data?.buildingCheckStatus == 1">
      <button class="btn" type="primary" @click="onAction">操 作</button>
    </view>

    <uni-popup
      ref="popup"
      borderRadius="40rpx 40rpx 0 0"
      background-color="#fff"
      @change="onChange"
    >
      <FormView :data="data" @callback="onCallback" v-if="showPop" />
    </uni-popup>
  </view>
</template>

<script>
import { getOssList } from '@/api/index';
import {
  delRoom,
  netRoomCheckFinish,
  netRoomCheckReview,
  getRoomCheckDetail,
  netRoomCheckDetail,
  netRoomCheckRectify,
} from '@/api/room';
import FormView from './checkForm.vue';
import useAppStore from '@/store/modules/app';
export default {
  components: {
    FormView,
  },
  data() {
    return {
      buildingCheckStatus: [
        {
          label: '待复查',
          text: '待复查',
          value: '1',
        },
        {
          label: '已复查',
          text: '已复查',
          value: '2',
        },
      ],
      recheckResult: [
        {
          text: '通过',
          label: '通过',
          value: '1',
        },
        {
          text: '未通过',
          label: '未通过',
          value: '2',
        },
      ],
      data: {},
      query: {},
      showPop: false,
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.query = query;
    this.getData();
  },
  methods: {
    getData() {
      getRoomCheckDetail(this.query.buildingCheckId).then((res) => {
        this.data = {
          ...res.data,
          buildingCheckItemObject: this.query.buildingCheckItemObject,
        };
        // 图片
        if (res.data.ossIdArrStr) {
          getOssList(res.data.ossIdArrStr).then((res) => {
            this.data.ossIdArrStr = res.data;
          });
        }
        if (res.data.rectifyOssIdArrStr) {
          getOssList(res.data.rectifyOssIdArrStr).then((res) => {
            this.data.rectifyOssIdArrStr = res.data;
          });
        }
      });
    },
    // popup
    onChange(e) {
      console.log(e);
      this.showPop = e.show;
    },
    // 操作
    onAction() {
      let arr = ['复查'];
      uni.showActionSheet({
        itemList: [arr[this.data.buildingCheckStatus - 1]],
        success: (res) => {
          if (res.tapIndex === 0) {
          }
          this.$refs.popup.open('bottom');
        },
        fail: (res) => {
          console.log(res.errMsg);
        },
      });
    },
    // 删除
    onDelete() {
      uni.showModal({
        title: '提示',
        content: '是否确认删除？',
        success: (res) => {
          if (res.confirm) {
            delRoom(this.query.roomId).then((res) => {
              uni.showToast({
                title: `删除成功`,
              });
              this.onBack();
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    // form回调
    onCallback(r, e) {
      let api;
      //   if (this.data.buildingCheckStatus === '1') {
      //     api = netRoomCheckFinish;
      //     // 明细提交
      //     e.map((item) => {
      //       if (
      //         item.buildingCheckItemResult ||
      //         item.buildingCheckItemResultDesc
      //       ) {
      //         netRoomCheckDetail({
      //           ...item,
      //         }).then((res) => {});
      //       }
      //     });
      //   } else if (this.data.buildingCheckStatus === '3') {
      //     api = netRoomCheckRectify;
      //   } else if (this.data.buildingCheckStatus === '4') {
      api = netRoomCheckReview;
      //   }
      // loading提示
      uni.showLoading({ title: '提交中' });
      let params = {
        ...this.data,
        ...r,
      };
      // 图片数据修改
      //   if (params.ossIdArrStr) {
      //     params.ossIdArrStr = params.ossIdArrStr
      //       .map((item) => item.ossId)
      //       .join();
      //   }
      //   if (params.rectifyOssIdArrStr) {
      //     params.rectifyOssIdArrStr = params.rectifyOssIdArrStr
      //       .map((item) => item.ossId)
      //       .join();
      //   }
      console.log(params, r);
      api(params).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: `操作成功`,
        });
        // 刷新详情
        this.getData();
        this.$refs.popup.close();
      });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 160rpx);
  padding-bottom: calc(
    var(--window-bottom) + constant(safe-area-inset-bottom) + 160rpx
  );
  padding-bottom: calc(
    var(--window-bottom) + env(safe-area-inset-bottom) + 160rpx
  );
  background: linear-gradient(180deg, #d7e4fd 0%, #fff 50%);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  .box {
    margin: 50rpx 36rpx 0;
    padding: 24rpx;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0 0 30rpx 0 #ccc;
    .mainBox {
      text-align: center;
      padding: 40rpx 0;
      line-height: 1;

      .id {
        font-size: 38rpx;
        font-weight: bold;
        color: #4288ff;
        padding-bottom: 40rpx;
      }

      .val {
        font-size: 40rpx;
        font-weight: 800;
        color: #ff884d;
        padding-bottom: 27rpx;

        text {
          font-size: 30rpx;
          margin-left: 10rpx;
        }
      }

      .status {
        font-size: 26rpx;
        font-weight: 500;
        color: #555555;
      }
    }
    .infoBox {
      .item {
        font-size: 30rpx;
        font-weight: 500;
        padding: 22rpx 12rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #eaeaea;
        &:last-child {
          border-bottom: 0;
        }
        .name {
          color: #989898;
        }

        .val {
          width: 60%;
          color: #333;
          text-align: right;
          word-break: break-all;
        }
      }

      .cdItemImg {
        // padding: 10rpx 0;
        .r {
          //   padding-top: 10rpx;
          display: flex;
          flex-wrap: wrap;
          .img {
            width: 80rpx;
            margin-right: 2.5%;
            &:nth-child(5n) {
              margin-right: 0;
            }
            img {
              display: inline-block;
              width: 100%;
              height: 100rpx;
            }
          }
        }
      }
    }
  }
  .myLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .star {
      color: #dd524d;
    }
  }
  .footer {
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(
      var(--window-bottom) + constant(safe-area-inset-bottom) + 60rpx
    );
    bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom) + 60rpx);
    .btn {
      width: 40%;
      margin: 0;
    }
  }
  .btnBox {
    margin: 60rpx 0 10rpx;
    .btn {
      background: linear-gradient(
          to bottom,
          #d5dee7 0%,
          #e8ebf2 50%,
          #e2e7ed 100%
        ),
        linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.02) 50%,
          rgba(255, 255, 255, 0.02) 61%,
          rgba(0, 0, 0, 0.02) 73%
        ),
        linear-gradient(
          33deg,
          rgba(255, 255, 255, 0.2) 0%,
          rgba(0, 0, 0, 0.2) 100%
        );
      background-blend-mode: normal, color-burn;
    }
  }
}
</style>
